<template>
  <el-dialog title="添加卡券" :visible.sync="dialogFormVisible" :before-close="close" :close-on-click-modal="false">
  <el-form :model="form">
    <el-form-item label="发放上限" :label-width="formLabelWidth">
      <el-col :span="16">
      <el-input v-model="form.issueCount" auto-complete="off"></el-input>
      </el-col>
      <el-col :span="8" style="padding-left: 10px">张</el-col>
    </el-form-item>
    <!--<el-form-item label="已发放卡券" :label-width="formLabelWidth">-->
      <!--<el-input v-model="form.takeCount" auto-complete="off"></el-input>-->
    <!--</el-form-item>-->
    <el-form-item label="卡券面额" :label-width="formLabelWidth">
      <el-col :span="16">
      <el-input v-model="form.faceValue" auto-complete="off"></el-input>
      </el-col>
      <el-col :span="8" style="padding-left: 10px">元</el-col>
    </el-form-item>

    <el-form-item label="卡券领取期限" :label-width="formLabelWidth">
       <el-date-picker
          v-model="couponTakeDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
    </el-form-item>
    <el-form-item label="有效期设置方式" :label-width="formLabelWidth">
        <el-radio-group v-model="form.validType">
          <el-radio  label='TIME'>按具体时间</el-radio>
          <el-radio  label='DAYS'>按天数</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="卡券有效期限" :label-width="formLabelWidth" v-show="(form.validType === 'TIME')">
      <el-date-picker
        v-model="couponValidityDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="卡券有效时长" :label-width="formLabelWidth" v-show="(form.validType === 'DAYS')">
      <el-col :span="16">
        <el-input v-model="form.expireDays" auto-complete="off"></el-input>
      </el-col>
      <el-col :span="8" style="padding-left: 10px">天</el-col>
    </el-form-item>
    <el-form-item label="可用商家" :label-width="formLabelWidth">
      <el-checkbox-group v-model="form.usableList">
        <el-checkbox v-for="items in options" :key="items.value" :label="items">{{items.companyName}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="起投金额" :label-width="formLabelWidth">
      <el-col :span="16">
        <el-input v-model="form.subscriptionOrigin" auto-complete="off"></el-input>
      </el-col>
      <el-col :span="8" style="padding-left: 10px">元</el-col>
    </el-form-item>
    <el-form-item label="起投期限" :label-width="formLabelWidth">
      <el-col :span="16">
      <el-input v-model="form.term" auto-complete="off"></el-input>
      </el-col>
        <el-col :span="8" style="padding-left: 10px">天</el-col>
    </el-form-item>
    <el-form-item label="描述内容" :label-width="formLabelWidth">
      <el-input v-model="form.description" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input v-model="form.remark" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </div>
  </el-dialog>
</template>
<script>
import { couponSave } from 'api/coupon'
import { companySelectList } from 'api/business'
import moment from 'moment'
export default {
  data() {
    return {
      dialogFormVisible: true,
      form: {
        cardId: '',
        description: '',
        expireDays: '',
        faceValue: '',
        issueCount: '',
        remark: '',
        validType: 'TIME',
        status: 'ENABLE',
        subscriptionOrigin: '',
        takeCount: '',
        takeDateEnd: '',
        takeDateStarted: '',
        validityStartDate: '',
        validityEndDate: '',
        term: '',
        type: 'FIRST_INVEST',
        usableList: []
      },
      options: [],
      checkList: [],
      couponTakeDate: [],
      couponValidityDate: [],
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getBusinessList()
  },
  watch: {
    couponValidityDate(val) {
      this.form.validityStartDate = moment(val[0]).format('YYYY-MM-DD')
      this.form.validityEndDate = moment(val[1]).format('YYYY-MM-DD')
    },
    couponTakeDate(val) {
      this.form.takeDateStarted = moment(val[0]).format('YYYY-MM-DD')
      this.form.takeDateEnd = moment(val[1]).format('YYYY-MM-DD')
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    async submit() {
      var regInteger = /^[1-9]\d*$/

      //      var regInteger02 = /^[0-9]\d*$/
      //      var regDecimal2 = /^[0-9]+(.[0-9]{1,2})?$/

      if (this.form.issueCount === '' || regInteger.test(this.form.issueCount) === false) {
        this.$alert('卡券发放上限格式错误, 请输入正整数', '提示')
        return
      }

      if (this.form.faceValue === '' || regInteger.test(this.form.faceValue) === false) {
        this.$alert('卡券面额格式错误, 请输入正整数', '提示')
        return
      }

      if (this.form.takeDateStarted === '' || this.form.takeDateStarted === null) {
        this.$alert('卡券领取开始时间为空, 请选择', '提示')
        return
      }
      if (this.form.takeDateEnd === '' || this.form.takeDateEnd === null) {
        this.$alert('卡券领取截止时间为空, 请选择', '提示')
        return
      }

      if (this.form.validType === 'TIME') {
        console.log('this.form.validType  = TIME')
        // 按照具体时间设置有效期
        this.form.expireDays = ''
        if (this.form.validityStartDate === '' || this.form.validityStartDate === null) {
          this.$alert('卡券有效开始时间为空, 请选择', '提示')
          return
        }
        if (this.form.validityEndDate === '' || this.form.validityEndDate === null) {
          this.$alert('卡券有效截止时间为空, 请选择', '提示')
          return
        }
      } else if (this.form.validType === 'DAYS') {
        // 按照有效时长设置有效期
        this.form.validityStartDate = ''
        this.form.validityEndDate = ''
        if (this.form.expireDays === '' || regInteger.test(this.form.expireDays) === false) {
          this.$alert('卡券有效时长格式错误, 请输入正整数', '提示')
          return
        }
      }

      if (this.form.subscriptionOrigin !== null && regInteger.test(this.form.subscriptionOrigin) === false) {
        this.$alert('起投金额格式错误, 请输入正整数', '提示')
        return
      }

      if (this.form.term === '' || regInteger.test(this.form.term) === false) {
        this.$alert('投资期限格式错误, 请输入正整数', '提示')
        return
      }

      try {
        let back = await couponSave(this.form)
        back = back.data
        if (back.resultCode === '200') {
          console.log(back.result)
          this.$emit('update')
        } else {
          this.$alert(back.msg, '提示')
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    async getBusinessList() {
      try {
        let back = await companySelectList()
        back = back.data
        if (back.resultCode === '200') {
          console.log(back.result)
          this.options = back.result
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    }
  }
}
</script>
